<template>
	<!-- 新增费用 -->
	<div>
		<el-form ref="costForm" :model="costForm" :rules="rules" label-width="2rem" id="addExpense">
			<el-row>
				<el-form-item label="财务状态">
					<el-radio-group v-model="costForm.financeStatus">
						<el-radio
							v-for="dict in dict.type.finance_status"
							:key="dict.value"
							:label="dict.value"
						>{{ dict.label }}</el-radio>
					</el-radio-group>
				</el-form-item>
					<el-form-item label="费用类别" prop="costTypeId">
						<el-select filterable placeholder="请选择费用类别" style="width:100%" v-model="costForm.costTypeId">
							<el-option
								v-for="item in costTypeList"
								:key="item.id"
								:label="item.costType"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item v-if="costForm.financeStatus == '1' || costForm.financeStatus == '2'" label="付款方" prop="payerReceiver">
						<el-select v-model="costForm.payerReceiver" allow-create filterable placeholder="请选择或输入付款方">
							<el-option
								v-for="dict in dict.type.payer_receiver"
								:key="dict.value"
								:label="dict.label"
								:value="dict.value"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item v-if="costForm.financeStatus == '3' || costForm.financeStatus == '4'" label="收款方" prop="payerReceiver">
						<el-select v-model="costForm.payerReceiver" allow-create filterable placeholder="请选择或输入收款方">
							<el-option
								v-for="dict in dict.type.payer_receiver"
								:key="dict.value"
								:label="dict.label"
								:value="dict.value"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item v-if="costForm.financeStatus == '1' || costForm.financeStatus == '2'" label="应收金额" prop="mustAmount">
						<el-input v-model="costForm.mustAmount" placeholder="请输入应收金额"/>
					</el-form-item>
					<el-form-item v-if="costForm.financeStatus == '3' || costForm.financeStatus == '4'" label="应付金额" prop="mustAmount">
						<el-input v-model="costForm.mustAmount" placeholder="请输入应付金额"/>
					</el-form-item>
					<el-form-item v-if="costForm.financeStatus == '1' || costForm.financeStatus == '2'" label="应收时间" prop="mustTime">
						<el-date-picker 
							clearable
							v-model="costForm.mustTime"
							type="date"
							value-format="yyyy-MM-dd"
							placeholder="选择应收时间">
						</el-date-picker>
					</el-form-item>
					<el-form-item v-if="costForm.financeStatus == '3' || costForm.financeStatus == '4'" label="应付时间" prop="mustTime">
						<el-date-picker 
							clearable
							v-model="costForm.mustTime"
							type="date"
							value-format="yyyy-MM-dd"
							placeholder="选择应付时间">
						</el-date-picker>
					</el-form-item>
					<el-form-item v-if="costForm.financeStatus == '1'" label="实收金额" prop="actualAmount">
						<el-input v-model="costForm.actualAmount" placeholder="请输入实收金额"/>
					</el-form-item>
					<el-form-item v-if="costForm.financeStatus == '3'" label="实付金额" prop="actualAmount">
						<el-input v-model="costForm.actualAmount" placeholder="请输入实付金额"/>
					</el-form-item>
					<el-form-item v-if="costForm.financeStatus == '1'" label="实收时间" prop="actualTime">
						<el-date-picker 
							clearable
							v-model="costForm.actualTime"
							type="date"
							value-format="yyyy-MM-dd"
							placeholder="选择实收时间">
						</el-date-picker>
					</el-form-item>
					<el-form-item v-if="costForm.financeStatus == '3'" label="实付时间" prop="actualTime">
						<el-date-picker 
							clearable
							v-model="costForm.actualTime"
							type="date"
							value-format="yyyy-MM-dd"
							placeholder="选择实付时间">
						</el-date-picker>
					</el-form-item>
					<el-form-item v-if="costForm.financeStatus == '1'" label="付款方式">
						<el-radio-group v-model="costForm.payChannel">
							<el-radio
								v-for="dict in dict.type.pay_way"
								:key="dict.value"
								:label="dict.value"
							>{{ dict.label }}</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="是否已入公账">
						<el-radio-group v-model="costForm.payIntoAmount">
							<el-radio
								v-for="dict in dict.type.pay_into_amount"
								:key="dict.value"
								:label="dict.value"
							>{{ dict.label }}</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item v-if="costForm.payIntoAmount == '1' && costForm.financeStatus == '1'" label="入公账时间" prop="payIntoTime">
						<el-date-picker 
							clearable
							v-model="costForm.payIntoTime"
							type="datetime"
							default-time="9:00:00"
							value-format="yyyy-MM-dd HH:mm"
							placeholder="选择入公账时间">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="备注" prop="remark">
						<el-input v-model="costForm.remark" :rows="4" type="textarea" placeholder="请输入备注"/>
					</el-form-item>
			</el-row>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button style="display: block;margin: 0 auto;" type="primary" @click="submitCost">确 定</el-button>
			<!-- <el-button @click="cancelCost">取 消</el-button> -->
		</div>
	</div>
</template>
<script>
import { listCostType } from "@/api/costType";
export default {
	dicts: ['finance_status','payer_receiver', 'pay_way', 'pay_into_amount'],
	data() {
		return {
			costTypeList: [],
			costForm: {
				financeStatus: "1",
				payChannel: "1",
				payIntoAmount: "0"
			},
			// 表单校验
			rules: {
				costTypeId: [{required: true, message: "费用类别不能为空", trigger: "blur"}],
				mustAmount: [{required: true, message: "应收/付金额不能为空", trigger: "blur"}],
				mustTime: [{required: true, message: "应收/付时间不能为空", trigger: "blur"}],
				actualAmount: [{required: true, message: "实收/付金额不能为空", trigger: "blur"}],
				actualTime: [{required: true, message: "实收/付时间不能为空", trigger: "blur"}],
				discount: [{required: true, message: "优惠金额不能为空", trigger: "blur"}]
			}
		}
	},
	created(){
		this.loading = this.$loading({
			lock: true,
			text: "加载中",
			background: "rgba(0, 0, 0, 0.7)",
		});
		this.getCostTypeList();
	},
	methods:{
		// 7 查询费用类型列表
		getCostTypeList() {
			listCostType().then((res) => {
				let list = [];
				res.rows.forEach((item, index) => {
					list.push({
						costCode: item.costCode,
						costType: item.costType,
						id: item.id,
						mustAmount: "",
						isShow: false,
					});
					if (res.rows.length - 1 === index) {
						this.costTypeList = list;
					}
				});
				this.loading.close();
			});
		},
		submitCost(){
			this.loading = this.$loading({
				lock: true,
				text: "上传中",
				background: "rgba(0, 0, 0, 0.7)",
			});
			this.$refs["costForm"].validate(valid => {
				this.costTypeList.forEach((item, index) => {
					if (item.id === this.costForm.costTypeId) {
						this.costForm.costTypeName = item.costType;
						this.costForm.costTypeCode = item.costCode;
						this.costForm.newId = Date.now();
						this.$emit("parHandle",this.costForm);
						this.costForm = {
							financeStatus: "1",
							payChannel: "1",
							payIntoAmount: "0"
						}
					}
				})
			})
			this.loading.close();
		},
	}
}
</script>
<style scoped lang="scss">
	@import '@/assets/css/common.css';
	#addExpense{
		/deep/ .el-radio{
			padding: .3rem 0;
		}
	}
</style>